<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border: #249bdb 1px solid;
            width: 500px;
            border-collapse: collapse;
        }

        table td {
            border: #249bdb 1px solid;
            padding: 10px;
        }

        table th {
            border: #249bdb 1px solid;
            padding: 10px;
            background-color: rgb(200, 200, 200);
        }

    </style>

    <script src="../js/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">

        $(function () {
            $(".up").click(function () {
                if ($(this).parent().parent().index() > 1) {
                    $(this).parent().parent().prev().before($(this).parent().parent())
                }
            })
            $(".down").click(function () {
                $(this).parent().parent().next().after($(this).parent().parent())
            })
        })

    </script>
</head>
<body>

<table>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>手机号</th>
        <th>籍贯</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>貂蝉</td>
        <td>15632658496</td>
        <td>锦州</td>
        <td>
            <input type="button" value=" ↑ " class="up"/>
            <input type="button" value=" ↓ " class="down"/>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>刘备</td>
        <td>15658462578</td>
        <td>蜀中</td>
        <td>
            <input type="button" value=" ↑ " class="up"/>
            <input type="button" value=" ↓ " class="down"/>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>曹操</td>
        <td>15666666666</td>
        <td>益州</td>
        <td>
            <input type="button" value=" ↑ " class="up"/>
            <input type="button" value=" ↓ " class="down"/>
        </td>
    </tr>
    <tr>
        <td>4</td>
        <td>孙权</td>
        <td>15688869153</td>
        <td>荆州</td>
        <td>
            <input type="button" value=" ↑ " class="up"/>
            <input type="button" value=" ↓ " class="down"/>
        </td>
    </tr>
</table>


</body>
</html>